// =============================================================================
// SCSS/SITE/STACKS/ETHOS/_COLOPHON.SCSS
// -----------------------------------------------------------------------------
// Styles for the site's footer.
// =============================================================================

// =============================================================================
// TABLE OF CONTENTS
// -----------------------------------------------------------------------------
//   01. Base Styles
// =============================================================================

// Base Styles
// =============================================================================

.x-colophon {
  position: relative;
  background-color: $colophonBackground;

  + .x-colophon {
    background-color: darken($colophonBackground, 6.5%);
  }

  &.top {
    padding: 5% 0 5.25%;

    [class*="span"] {
      .widget:first-child {
        margin-top: 0;
      }
    }

    @include break(cubs) {
      padding: 6.5% 0;

      [class*="span"] {
        .widget:first-child {
          margin-top: 5em;
        }
      }

      [class*="span"]:first-child {
        .widget:first-child {
          margin-top: 0
        }
      }
    }
  }

  &.bottom {
    padding: $layoutSpacing 0;
    @include font-size(1.1);
    text-align: center;
    text-transform: uppercase;
    color: $textColor;

    .x-nav {
      margin: 0 0 15px;
      line-height: 1.3;

      li {
        display: inline-block;

        a {
          display: inline-block;
          color: $topbarBottomFooterColor;
          text-decoration: underline;
        }

        &:after {
          content: "/";
          display: inline-block;
          margin: 0 0.5em 0 0.75em;
          color: $topbarBottomFooterColor;
        }

        &:last-child {
          &:after {
            display: none;
          }
        }
      }
    }

    .x-colophon-content {
      margin: 0 0 15px;
      line-height: 1.3;
      color: $topbarBottomFooterColor;

      p {
        margin: 0;
      }

      a {
        color: $topbarBottomFooterColor;
        text-decoration: underline;
      }
    }

    .x-social-global {
      clear: both;
      margin: 0;

      a {
        margin: 0 1%;
        @include font-size(1.8);
      }
    }
  }

  .widget {
    margin-top: 5em;
  }
}